<template>
    <div>
    <div>
<el-form :model="search" style=" margin: 20px 0 0 20px;" ref="search" label-width="100px">
  <el-row>
    <el-col :span="6" style=" margin-right: 20px;">
      <el-form-item label="组织">
        <el-input v-model="search.Key" placeholder="请输入组织名称" style="width: 100%;"/>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="状态">
        <el-select v-model="search.Status" placeholder="请选择" style="width: 100%;">
          <el-option label="启用" value="启用"></el-option>
          <el-option label="停用" value="停用"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="2">
      <el-button class="cz" type="primary" @click="clear()">重置</el-button>
    </el-col>
    <el-col :span="2">
      <el-button class="cx" type="primary" @click="query()">查询</el-button>
    </el-col>
  </el-row>
</el-form>
</div>
<div><el-button class="cx" type="primary" style="margin-left:20px;" @click="add()">新增</el-button></div>
<div id="dataDiv">
      <el-table :data="data" class="bian">
        <el-table-column label="序号" prop="o_SSerialId"></el-table-column>
        <el-table-column label="组织编号" prop="o_SOrganizationCode"></el-table-column>
        <el-table-column label="组织名称" prop="o_SOrganizationName"></el-table-column>
        <el-table-column label="排序" prop="o_SSortingOrder"></el-table-column>
        <el-table-column label="状态" prop="o_SStatus"></el-table-column>
        <el-table-column label="备注" prop="o_SRemarks"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="upd(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
    </div>
    <!-- 模态框部分 -->
    <!-- 添加页面 -->
  <!-- <el-dialog title="新增" :visible.sync="insert">
    <el-form :model="insertAdd" ref="insertFrom" label-width="100px">
  <table class="tableEdit">
        <thead>
            <tr>
                <td colspan="4">销售机会添加</td>
            </tr>
        </thead>
        <tr>
            <th>上级分类</th>
            <td>
                <el-form-item  prop="o_SOrganizationName">
              <el-input v-model="xx.o_SOrganizationName" id="jv1"></el-input>
            </el-form-item>
            </td>
            <th>组织编号</th>
            <td>
              <el-form-item  prop="o_SOrganizationCode">
              <el-input v-model="xx.o_SOrganizationCode" id="jv1"></el-input>
            </el-form-item>
               </td>
        </tr>
        <tr>
            <th>组织名称</th>
            <td><el-form-item  prop="lxr">
              <el-input v-model="xx.lxr" id="jv1"></el-input>
            </el-form-item></td>
            <th>排序</th>
            <td><el-form-item  prop="dh">
              <el-input v-model="xx.dh" id="jv1"></el-input>
            </el-form-item></td>
        </tr>
        <tr>
            <th>概要：</th>
            <td colspan="3"><el-form-item  prop="gy">
              <el-input v-model="xx.gy" id="jv"></el-input>
            </el-form-item></td>
        </tr>
        <tr>
            <th>机会描述：</th>
            <td colspan="3"><el-form-item  prop="desc">
              <el-input v-model="xx.desc" type="textarea" id="jv"></el-input>
            </el-form-item></td>
        </tr>
        <tfoot>
            <tr>
                <td colspan="7">
                    <input type="button" value="确定" @click="tt('insertFrom')"/>&nbsp;&nbsp;
                    <input type="button" value="关闭"  @click="gb" />
                </td>
            </tr>
        </tfoot>
    </table>
     </el-form>
</el-dialog> -->
     </div>
</template>

<script>
import $http from '../router/base.js';
import axios from 'axios';
export default {
    data(){
        return{
            data:[],
            // insert:false,
            // insertAdd:{

            // },
            search:{
                Key:'',
                Status:'',
            },
            }
        },
    methods: {
        fill(){
        $http.get('api/OrganizationalStructure/FenYe',{
        })
          .then(res => {
            this.data = res;
          })
       },
       query() {
  // 查询数据逻辑
  const { Key, Status } = this.search;
  $http.get('api/OrganizationalStructure/FenYe', {
   params: {
   Key:Key,
   Status:Status,
   }
  }).then((response) => {
   this.data = response;
  }).catch((error) => {
   console.log(error);
  });
 },
  clear() {
    // 清空搜索条件
  this.search.Key = '';
  this.search.Status = '';
  // 重新调用查询方法，以获取所有数据
  this.query();
  },
        },
    mounted: function () {
        this.fill();
 }
    }
</script>

<style scoped>
.cz
{
margin-right: 20px; 
width: 80px; 
height: 40px; 
background-color: white; 
color: black;
border-color: #C1C1C1;
margin-left: 20px;
}
.cx
{
   width: 80px;
   height: 40px; 
   background-color: #45B984; 
}
.bian
{
    margin:20px;
}
</style>